<head>
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"> </script>
<script>
$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#"+activeTab).fadeIn(); 
	});
});

$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#"+activeTab).fadeIn(); 
	});
});

$(document).ready(function(){ 
	$("#datafile").change(function () {
		var ext = $("#datafile").val().split('.').pop().toLowerCase();
		if($.inArray(ext, ['png','jpg','jpeg']) == -1) {
		    alert('invalid extension!');
		}
	})});

</script>

<style type="text/css">

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999999;
	border-left: 1px solid #999999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	cursor: pointer;
	padding: 0px 21px ;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999999;
	border-left: none;
	font-weight: bold;
	background: #EEEEEE;
	overflow: hidden;
	position: relative;
}
ul.tabs li:hover {
	background: #CCCCCC;
}	
ul.tabs li.active{
	background: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}
.tab_container {
	border: 1px solid #999999;
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	background: #FFFFFF;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
	display: none;
}

</style>

</head>

My uploaded images <br/>
This Images will be displayed on your public profile <br/>


<form name="imageHandler" id="imageForm"  method="post" action="/member/merchant/image/action/delete/">
{% for image_el in profile.images.all %}
<img src="{{ MEDIA_URL }}{{image_el.thumbnail}}" width="60" height="60"/>
    <input id="delete_{{image_el.id}}" type="checkbox" name="delete_image" value="{{image_el.id}}">
    <label for="delete_{{image_el.id}}">Delete</label>
{% if user.age %}
    {% if image_el.image in active_images_path %}
		{% if user.profile_image == image_el.id %}
			<input id="select_{{image_el.id}}" type="radio" id="select_image" name="select_image" checked value="{{image_el.id}}">
		{% else %}
			<input id="select_{{image_el.id}}" type="radio" id="select_image" name="select_image"  value="{{image_el.id}}">
		{% endif %}
		<label for="select_{{image_el.id}}">Select as profile image</label> 
	{% endif %}
{% endif %}

<br>
{% csrf_token %}
{% endfor %}
<input id="submitlink" type="submit" value="Delete"/>

</form>

{% if user.age %}
<form name="login" enctype="multipart/form-data" method="post" id="saveForm" action="/member/merchant/saveProfile/">
{% else %}
<form name="login" enctype="multipart/form-data" method="post" id="saveForm" action="/member/shopper/saveProfile/">
{% endif %}
		<label for="profile">My profile</label> <br/>
		
		<ul class="tabs"> 
		    {% for key, value in locales.items %}
		        {% if key.0 == user.lang %}
        			<li rel="tab{{key.0}}" class="active"> {{key.1}}</li>
        		{% else %}
        			<li rel="tab{{key.0}}"> {{key.1}}</li>
        		{% endif %}
        	{% endfor %}
    	</ul>

		<div class="tab_container"> 

			{% for key, value in locales.items %}
     		<div id="tab{{key.0}}" class="tab_content"> 
     			<textarea name="description-{{key.0}}" cols="30" id="profile" rows="4">{{value.loc_profile}}</textarea>
     		</div><!-- #tab1 -->
     		{% endfor %}
     
 		</div>
 		
		<label for="first_name">First name:</label>
		<input name="first_name" value="{{profile.first_name}}">  <br/>
		<label for="last_name">Last name:</label>
		<input name="last_name" value="{{profile.last_name}}"/> <br/>
		<input type="file" name="datafile" id="datafile" size="40" accept="image/*"> <br/>
		<!--  <input type="submit" value="save"/> -->
		<input type="button" name="sel" value="save" id="submitButton">	<br/>
		Only JPG/PNG files are allowed 
		{% csrf_token %}
</form> <br/>

<br/>
<a href="/member/myAccount/"> Main page </a> <br/>

{% if messages %}
    {% for message in messages %}
       {{ message }} <br/>
    {% endfor %}
{% endif %}

<br>
Current profile status: <br>
{% if user.getPendingProfile %}
   {% if user.getPendingProfile.status == 0 %}
       this profile is pending for review <br>
   {% elif user.getPendingProfile.status == 3 %}
       this profile was rejected<br>
       comment: {{user.getPendingProfile.status_comment}} <br>
   {% endif %}
 
{% else %}
  This is your active profile<br>
{% endif %}  
  
<script>

$(" #submitButton ").click(function() {
	  selImage = $('input[type="radio"]:checked').val();
	  if (selImage) {
	      $(" #submitButton ").append('<input type="hidden" name="select_image" value="'+ selImage+'" />')
	  }
	  $(" #saveForm ").submit();
	});
</script>
